<template>
    <div class="email-login">
        <div class="email-login-top border">
            <div class="el-t-left" @click="goToLogin()">&lt; 返回</div>
            <div class="el-t-center">重置密码</div>
        </div>
        <div class="email-login-content">
            <div class="el-c-top">
                <div class="ul-c-t-password w100 center">
                    <el-input type="password" class="user_input border" placeholder="密码" v-model="userInfo.password"
                    autocomplete="new-password" show-password></el-input>
                </div>
                <div class="ul-c-t-password w100 center">
                    <el-input type="password" class="user_input border" placeholder="确认密码" v-model="userInfo.confirmPassword"
                    autocomplete="new-password" show-password></el-input>
                </div>  
                <button class="btn mt" @click="resetPassword()">重置</button>
            </div>
        </div>
        <van-dialog class="reset-password" v-model:show="isShowResetSuccesTip" title="重置密码" @confirm="onConfirm">
            <!-- <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" /> -->
            <div>重置密码成功</div>
        </van-dialog>
    </div>
    <error-alert :message="errorMessage" ref="showErrorAlert"></error-alert>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue"
import { useRouter, useRoute } from "vue-router"
import { IUserIdAndPwdModel } from "../../user.model"
import { decode } from "@/utils/base64"
import loginByUserIdStore from '../login-by-id.store'

const loginByUserIdSe = loginByUserIdStore() 
const router = useRouter()
const route = useRoute()
const goToLogin = () => {
    router.push({
        name: 'userIdLogin'
    })
}

const userInfo = reactive({
    password: '',
    confirmPassword: ''
}) as IUserIdAndPwdModel

// 重置成功弹窗
let isShowResetSuccesTip = ref<boolean>(false)
const onConfirm = () => {
    isShowResetSuccesTip.value = false
    goToLogin()
}

// 校验用户输入是否正确
let isPwdMeetVerification = ref<boolean>(false)
let errorMessage = ref<string>('')
let showErrorAlert = ref<any>(null)
let regx1 = /^\S*(?=\S{8,20})(?=\S*\d)(?=\S*[A-Za-z])(?=\S*[!@#$%^&*? ])\S*$/i
// 点击登录按钮
let userEmail = JSON.stringify(decode(route.params.userEmail))
const resetPassword = () => {
    if(userInfo.password == '' || userInfo.confirmPassword == '') {
        errorMessage.value = '请输入账号或密码'
        showErrorAlert.value.showErrorAlert()
        return
    }
    regx1.test(userInfo.password) ? isPwdMeetVerification.value = true : isPwdMeetVerification.value = false
    if(!isPwdMeetVerification.value) {
        // 密码不符合规范 
        errorMessage.value = '密码必须包含8-20位字母、数字和特殊字符，但不能和账号相同'
        showErrorAlert.value.showErrorAlert()
        return
    }
    if(userInfo.confirmPassword != userInfo.password) {
        // 确认密码与密码不符
        errorMessage.value = '确认密码与密码不符'
        showErrorAlert.value.showErrorAlert()
        return
    }

    const data = {
        newPassword: userInfo.confirmPassword,
        userType: 10001,
        email: userEmail
    }
    loginByUserIdSe.resetPassword(data).then((res: any) => {
        if(res.status == 'success') {
            isShowResetSuccesTip.value = true
        } else {
            errorMessage.value = res.errMessage
            showErrorAlert.value.showErrorAlert()
        }
    })
}

onMounted(() => {
    if(!userEmail || userEmail == '') {
        router.push({
            name: 'userIdLogin'
        })
    }
})

</script>

<style lang="less" scoped>
.email-login {
    width: 100%;
    height: 100vh;
    position: relative;

    .email-login-top {
        width: 100%;
        height: var(--navigation-bar-height);
        line-height: var(--navigation-bar-height);
        border-bottom: 1px solid #BABABA;
        padding: 0 1.7rem;
        text-align: center;

        .el-t-left {
            color: #1780F1;
            position: absolute;
        }

        .el-t-center {
            color: #000000;
            font-weight: 600;
        }
    }

    .email-login-content {
        width: 100%;
        min-height: calc(100% - 2.5rem);

        .el-c-top {
            height: 21rem;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 0 3.7rem;

            .el-c-t-agreement{
                font-size: 14px;
                margin-top: 1rem;

                a {
                    color: #000000;
                }

                .el-c-t_checkbox {
                    margin-right: 0.7rem;
                    vertical-align: middle;
                }
            }
        }
    }
}

:deep(.el-input__wrapper) {
    box-shadow: none;
    background-color: var(--bg-color);
    .el-input__inner {
        text-align: center;
        font-size: 17px;
        color: var(--font-color-black);
    }   
}

:deep(.van-dialog) {
    .van-dialog__header {
        padding: 1rem 0;
        font-size: 16px;
        color: var(--font-color-black);
    }
    .van-dialog__content {
        text-align: center;
        padding: 1rem;
        color: var(--font-color-black);
    }
    .van-dialog__footer {
        .van-button {
            color: var(--font-color-black);
        }
    }
}
</style>